Has 'no records in list' message

Description

A common requirement in a List is to show a custom message if the List has no records. The List control has built-in properties to make this task easy. You can automatically center the message horizontally and vertically in the List.

To see how this is done watch this video or follow the example below.

Delete all Records in a List and Display a Message

In order to show a 'no records in list' message, this example will first create a list control with a button to delete all records.

  1. In the UX Controls page go to the Data Controls menu and click [List] to add a list control.

    images/hlight3.png
  2. Scroll down the control Properties list to the List Properties section. Click the [...] button next to the 'List properties' property to open the List Builder.

    images/hlight4.png
  3. In the Data Source pane click the 'Static' option in the Data Source Type menu. Then click the [...] button next to the Static data property.

    images/recmess2.png
  4. Click the Sample data button at the bottom of the Static Choices dialog.

    images/recmess3.png
  5. Click the CR-LF format "Name and addresses" option and click OK and OK again.

    images/recmess4.png
  6. In the List Builder, open the List Properties pane. Check the "Has 'no records in list' message property.

    images/recmess5.png
  7. Open the List Layout pane. Use the blue > arrow to move the four static fields (Firstname, Lastname, City, and State) from the Available Fields list into the 'Columns in List' area. Click OK to close the List Builder.

    images/recmess6.png
  8. On the UX Controls page click on [Button] in the Other Controls menu to add a button control to the component. Give it the name "Delete all Records".

    images/recmess7.png
  9. Highlight the button control and scroll down the control properties to the OnClick property in the Javascript section.

    images/recmess8.png
  10. Select Text mode and add the following code to the OnClick event:

    var lObj = {dialog.object}.getControl('list1');
     lObj.populate([]);
    images/recmess9.png
  11. Click Save and run the component in Live Preview. When you click the 'Delete all Records' button you should get a 'No records in List' Message.

    • images/recmess10.png
    • images/recmess11.png

See Also